/* 主题颜色变量 */
:root {
  // 主色调
  --primary-100: #4CAF50;
  --primary-200: #2a9235;
  --primary-300: #0a490a;
  
  // 强调色
  --accent-100: #FFC107;
  --accent-200: #916400;
  
  // 文本颜色
  --text-100: #333333;
  --text-200: #5c5c5c;
  
  // 背景色
  --bg-100: #e6fbe3;
  --bg-200: #dcf1d9;
  --bg-300: #b4c8b1;
}

/* Element Plus 主题覆盖 */
$--color-primary: var(--primary-100);
$--color-success: var(--primary-200);
$--color-warning: var(--accent-100);
$--color-danger: #f56c6c;
$--color-info: #909399;

/* 边框颜色 */
$--border-color-light: #e4e7ed;
$--border-color-lighter: #ebeef5;
$--border-color-extra-light: #f2f6fc;

/* 文本颜色 */
$--color-text-primary: var(--text-100);
$--color-text-regular: var(--text-200);
$--color-text-secondary: #909399;
$--color-text-placeholder: #c0c4cc;

/* 背景颜色 */
$--background-color-base: var(--bg-100);

/* 导出变量给 JS 使用 */
:export {
  colorPrimary: var(--primary-100);
  colorSuccess: var(--primary-200);
  colorWarning: var(--accent-100);
  colorDanger: #f56c6c;
  colorInfo: #909399;
  
  textPrimary: var(--text-100);
  textRegular: var(--text-200);
  
  bgBase: var(--bg-100);
  bgLight: var(--bg-200);
}

/* 主题背景颜色 */
$primaryBg: #ecf5ff;
$successBg: #f0f9eb;
$warningBg: #fdf6ec;
$dangerBg: #fef0f0;
$infoBg: #f4f4f5;

/* 字体颜色 */
$primaryTextColor: #303133;
$regularTextColor: #606266;
$secondaryTextColor: #909399;
$placeholderTextColor: #C0C4CC;

/* 边框颜色 */
$borderColorBase: #DCDFE6;
$borderColorLight: #E4E7ED;
$borderColorLighter: #EBEEF5;
$borderColorExtraLight: #F2F6FC;

/* 背景颜色 */
$backgroundColorBase: #F5F7FA;
$backgroundColorWhite: #FFFFFF;

/* 菜单颜色 */
$menuBg: #304156;
$menuHover: #263445;
$menuText: #BFCBD9;
$menuActiveText: #409EFF;

/* 侧边栏 */
$sideBarWidth: 210px;
$collapseSideBarWidth: 64px;

/* 导航栏 */
$navBarHeight: 50px;

/* 标签栏 */
$tagViewHeight: 34px;

/* 布局 */
$contentPadding: 20px;
$headerHeight: 50px;
$footerHeight: 50px;

/* 断点 */
$breakpoints: (
  'xs': 480px,
  'sm': 768px,
  'md': 992px,
  'lg': 1200px,
  'xl': 1600px
);

/* 混合器 */
@mixin clearfix {
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}

@mixin scrollBar {
  &::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  
  &::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 3px;
  }
  
  &::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
  }
}

@mixin ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
} 